<template>
	<view class="hot-box">
		<text class="title">热门推荐</text>
		<image @click="toTXmap"
			src="https://file.whshiyuan.cn:9000/toopu/compressed/5751741267396_compressed_img.png"
			mode="aspectFill"></image>
		<scroll-view class="hot-img-box" scroll-x="true">
			<block v-for="(item, index) in displayHotImgs" :key="index">
				<view class="hot-item" @click="showDetail(item)">
					<image :src="imageUrl + item.firstImage" mode="aspectFill"></image>
				</view>
			</block>
		</scroll-view>

		<!-- 弹出层 -->
		<uni-popup ref="popup" type="center">
			<view class="popup-content" v-if="currentSpot">
				<view class="popup-header">
					<text class="popup-title">{{currentSpot.scienc_name}}</text>
					<text class="close-btn" @click="closePopup">×</text>
				</view>
				<swiper class="popup-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
					<swiper-item v-for="(img, index) in currentSpotImages" :key="index">
						<image :src="imageUrl + img" mode="aspectFill" class="popup-image"></image>
					</swiper-item>
				</swiper>
				<view class="popup-desc">
					{{currentSpot.scenic_decr}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad 
	} from '@dcloudio/uni-app'
	import {
		getMapData
	} from '@/config/API/Map.js';
	import {
		imageUrl
	} from '@/config/request/request.js'
	import {
		routerGuard
	} from '@/config/RouteGuard.js'
	
	const hotImgs = ref([])
	const popup = ref(null)
	const currentSpot = ref(null)
	
	const currentSpotImages = computed(() => {
		if (!currentSpot.value) return [];
		return currentSpot.value.scienc_img.split(',').filter(img => img);
	})
	
	const displayHotImgs = computed(() => {
		return hotImgs.value
			.filter(item => item.if_show === 1)
			.map(item => ({
				...item,
				firstImage: item.scenic_top_img || item.scienc_img.split(',')[0]  // 优先使用scenic_top_img
			}))
			.reverse()
			.slice(0, 10)
	})
	
	const showDetail = (item) => {
		currentSpot.value = item;
		popup.value.open();
	}

	const closePopup = () => {
		popup.value.close();
	}
	
	onLoad(async () => {
		try {
			const resdata = await getMapData()
			hotImgs.value = resdata.data
			console.log('hotImgs.value', hotImgs.value);
		} catch (error) {
			console.log('获取数据失败', error);
		}
	})
	
	const toTXmap = () => {
		const url = `/homeSubpages/TXmap/TXmap?id=1`;
		routerGuard(url);
	}
</script>

<style lang="scss" scoped>
	.hot-box {
		width: 100%;
		min-height: 20vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		gap: 40rpx;

		.title {
			display: block;
			font-size: 36rpx;
			font-weight: 600;
		}

		>image {
			width: 100%;
			max-height: 500rpx;
			border-radius: 20rpx;
		}

		.hot-img-box {
			width: 100%;
			max-height: 360rpx;  // 增加高度以适应标题
			white-space: nowrap;

			.hot-item {
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				margin-right: 20rpx;
				width: calc(100% / 3);
				cursor: pointer;

				&:active {
					opacity: 0.8;
				}

				image {
					width: 100%;
					height: 300rpx;
					border-radius: 20rpx;
				}

			
			}
		}
	}

	.popup-content {
		background-color: #fff;
		border-radius: 24rpx;
		width: 680rpx;
		padding: 40rpx;
		margin: 0 20rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.popup-title {
		font-size: 38rpx;
		font-weight: 600;
		color: #333;
	}

	.close-btn {
		font-size: 48rpx;
		color: #999;
		padding: 0 20rpx;
		cursor: pointer;
		transition: all 0.3s ease;
		
		&:active {
			color: #666;
			transform: scale(0.95);
		}
	}

	.popup-swiper {
		width: 100%;
		height: 400rpx;
		margin-bottom: 30rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.popup-image {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
		transition: transform 0.3s ease;
		
		&:active {
			transform: scale(1.02);
		}
	}

	.popup-desc {
		font-size: 30rpx;
		color: #666;
		line-height: 1.8;
		padding: 20rpx 10rpx;
		max-height: 600rpx;
		overflow-y: auto;
	}
</style>